<style lang="scss" scoped>
.forget {
  width: 100%;
  height: 100vh;
  background: url('../../bl-img/login_bg.png') no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .forget-item {
    width: 300px;
    background-color: #fff;
    padding: 10px 20px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 10px;
  }
}
</style>

<template>
  <div class="forget">
    <van-nav-bar title="忘记密码" left-arrow @click-left="router.back()"> </van-nav-bar>
    <div class="forget-item">
      <van-field v-model="email" center clearable placeholder="请输入邮箱账号">
        <template #button>
          <van-button size="small" @click="getCode" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <van-field v-model="code" placeholder="请输入验证码" />
    </div>
    <el-button
      type="primary"
      @click="goForget2"
      round
      style="width: 300px; margin: 0 auto; margin-bottom: 40px"
      size="large"
      >下一步</el-button
    >
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { request } from '../../axios/request'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getForget } from '../../stores/forget'

// 跳转路由
const router = useRouter()

// 获取store
const setForget = getForget()

// 绑定表单
const email = ref('')
const code = ref('')

// 获取验证码
const getCode = async () => {
  await request
    .post(
      '/api/health/doctor/v1/sendEmailCode',
      {
        email: email.value
      },
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      let { message, status } = res.data
      if (status === '0000') {
        ElMessage.success(message)
      } else {
        ElMessage.error(message)
      }
    })
}

// 下一步
const goForget2 = async () => {
  await request
    .post(
      '/api/health/user/v1/checkCode',
      {
        email: email.value,
        code: code.value
      },
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      let { message, status } = res.data
      if (status === '0000') {
        console.log(message);
        setForget.email = email.value
        router.push('/forgettwo')
      } else {
        console.log(message);
      }
    })
}
</script>